<template>
  <div :class="{ 'f-left-row__wrapper': true, sub: subGroup }">
    <div class="f-left-row--entry">
      <div class="f-left-row--number" :style="{ left: entryPixel }">
        {{ entry }}
      </div>
      <div class="f-left-row--entry-bar__wrapper">
        <svg
          class="f-left-row--entry-bar"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="100%"
          height="20px"
          ref="entryBar"
        >
          <line
            :x1="entryX1"
            :x2="entryBar"
            y1="10"
            y2="10"
            :stroke-width="subGroup ? 8 : 14"
            strok="inherit"
            fill="transparent"
          >
            <animate
              attributeName="x1"
              :from="entryBar"
              :to="entryX1"
              :dur="Math.round(600 + Math.random() * 100) + 'ms'"
            ></animate>
          </line>
        </svg>
      </div>
    </div>
    <div
      class="f-left-row--nation"
      :style="{
        'font-size': subGroup
          ? 'var(--inner-text-size)'
          : 'var(--inner-subtitle-size)',
      }"
    >
      <router-link
        :to="computedTo + nation"
        :style="{ 'pointer-events': subGroup ? 'none' : 'inherit' }"
      >
        {{ nation }}
      </router-link>
    </div>
    <div class="f-left-row--exit">
      <div class="f-left-row--exit-bar__wrapper">
        <svg
          class="f-left-row--exit-bar"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="100%"
          height="20px"
          ref="exitBar"
        >
          <line
            x1="0"
            :x2="exitX2"
            y1="10"
            y2="10"
            :stroke-width="subGroup ? 8 : 14"
            strok="inherit"
            fill="transparent"
            class="f-line"
          >
            <animate
              attributeName="x2"
              from="0"
              :to="exitX2"
              :dur="Math.round(600 + Math.random() * 100) + 'ms'"
            ></animate>
          </line>
        </svg>
      </div>
      <div class="f-left-row--number" :style="{ left: exitPixel }">
        {{ exit }}
      </div>
    </div>
  </div>
</template>

<script>
const CONST_SIZE = 35;
export default {
  name: 'LeftRow',
  props: {
    nation: String,
    entry: {
      type: [Number, String],
      default: 0,
    },
    exit: {
      type: [Number, String],
      default: 0,
    },
    subGroup: Boolean,
    maxEntry: {
      type: Number,
      default: 1,
    },
    maxExit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      entryBar: 0,
      exitBar: 0,
      entryX1: 0,
      exitX2: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        this.calculateWidth('entryBar');
        this.calculateWidth('exitBar');
      });
      this.calculateWidth('entryBar');
      this.calculateWidth('exitBar');
    });
  },
  computed: {
    exitPixel() {
      if (!this.exitX2) return '0px';
      return `${this.exitX2 + 10}px`;
    },
    entryPixel() {
      if (!this.entryX1) return '0px';
      return `${this.entryX1 - 50}px`;
    },
    computedTo() {
      return this.$route.path.match(/(pvg)/)
        ? '/pvg/detail?continental='
        : '/detail?continental=';
    },
  },
  methods: {
    calculateWidth(refName) {
      if (!this.$refs[refName]) return;
      let elem = this.$refs[refName];
      if (typeof this[refName] !== 'undefined') {
        this[refName] = elem.getBoundingClientRect().width;
        let val = refName === 'entryBar' ? +this.entry : +this.exit,
          total = refName === 'entryBar' ? this.maxEntry : this.maxExit;
        const percent = val / total;
        if (refName === 'entryBar') {
          this.entryX1 = this[refName] - percent * this[refName] + CONST_SIZE;
        } else {
          this.exitX2 = percent * this[refName] - CONST_SIZE;
        }
      }
    },
  },
};
</script>
